/*
 * @Title: 酒店查询组件
 * @Created by: ycq 
 */
<template>
	<view class="hotel-query">
		<!-- <input type="text" placeholder="关键字/位置/品牌/酒店名" @click="chooseHotel" placeholder-style="color:#CCCCCC"> -->
		
			<view class="swiper-box">
				<swiper  v-if="hotelData.length>1" class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"   @change="menuChange">
					<swiper-item v-for="(pageItem,index) in hotelData" :key='index'>
						<view class="swiper-item" >
							<view class="head-menu-area">
								<view class="head-menu-item" v-for="nav in pageItem.data" :key='nav.name' @click="navClick(nav.url)">
									<view class="head-menu-img">
										<image :src='nav.img' mode="aspectFit"></image>
									</view>
									<text>{{nav.name}}</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dot-main">
					<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
					<view :class="['dot-item',current==index?'active':'']" v-if='hotelData.length > 1' v-for="(item,index) in hotelData" :key="index"></view>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
					<view :class="['dot-item',current==index?'active':'']" v-if='hotelData.length > 1' v-for="(item,index) in hotelData" :key="index"></view>
					<!-- #endif -->
				</view>
			</view>
		
		<view   class="price-star" @click="toChooseCity">
			<image class="pos-icon" src="/static/pos-2.png" mode=""></image>
			<text class="pos">沈阳市 沈河区 沈阳路</text>
			<uniIcon class='jiantou' type='arrowleft' size='20' color='rgba(167,167,167,1.00)'></uniIcon>
		</view>
		<hr>
		<view  @click="chooseHotel" class="price-star">
			<text>{{hotelSearch==''?'关键字/位置/品牌/酒店名':hotelSearch}}</text>
		</view>
		<hr>
		<view class="date" @click="toDate">
			<text class="data-text">
				<text class="time">{{startTime}}</text>
				入住
				<text class="zhi">—</text>
				<text class="time">{{endeTime}}</text>
				离店
			</text>
			<uniIcon class='jiantou' type='arrowleft' size='20' color='rgba(84,174,255,1.00)'></uniIcon>
			<text class="days">共{{day}}晚</text>
			
		</view>
		<hr>
		<view @click="choosePrice" class="price-star">
			<text>
			{{((hotelPrice!=''&&hotelPrice!=null)||(hotelStar!=''&&hotelStar!=null))? hotelPrice+hotelStar:'设置我喜欢的星级/价格'}}
			</text>
			<uniIcon class='jiantou' type='arrowleft' size='20' color='rgba(167,167,167,1.00)'></uniIcon>
		</view>
		<!-- <hr> -->
		<!-- <view class="type">
			<text>出行类型</text>
			<radio-group @change="radioChange">
				 <label class="radio"><radio class="radio-item" value="r1" :checked="type === 1" />出差</label>
				 <label class="radio"><radio class="radio-item" value="r2" :checked="type === 2" />休闲</label>
			</radio-group>
		</view> -->
		<button class="btn">
			查  询
		</button>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		props: {
			showData: {
				default: "设置我喜欢的星级/价格"
			},
		},
		data(){
			return{
				placeholderD:"",
				placeholderP:'',
				placeholderS:'',
				current:0,
				type:1,
				startTime:'8月9日',
				endeTime:'8月11日',
				day:3,
				hotelData:[  // 首页-美食
					{data:[
						{name:'钟点房',img:'/static/zdf.png',url:''},
						{name:'特价酒店',img:'/static/tjjd.png',url:''},
						{name:'民宿',img:'/static/ms.png',url:''},
						{name:'民宿短租',img:'/static/msdz.png',url:''},
						{name:'复式',img:'/static/fs.png',url:''}
						],
					},
					{data:[
						{name:'钟点房',img:'/static/zdf.png',url:''},
						{name:'特价酒店',img:'/static/tjjd.png',url:''},
						{name:'民宿',img:'/static/ms.png',url:''},
						{name:'民宿短租',img:'/static/msdz.png',url:''},
						{name:'复式',img:'/static/fs.png',url:''}
						],
					},	
				],
			}
		},
		methods:{
			choosePrice(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.showHPSArea();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.showHPSArea();
				//#endif
			},
			chooseHotel(){
				uni.navigateTo({
					url:'hotelSearch'
				})
			},
			toDate(){
				uni.navigateTo({
					url:'hotelDate?pageFrom=hotel'
				})
			},
			toChooseCity(){
				uni.navigateTo({
					url:'/pages/gonglue/myselfTourNote/citySelect'
				})
			}
		},
		computed: {
			hotelPrice() {
				return this.$store.state.hotelPrice
			},
			hotelStar(){
				return this.$store.state.hotelStar
			},
			hotelSearch(){
				return this.$store.state.hotelSearchText
			}
		},
		components: {
			uniIcon
		},
	}
</script>

<style scoped>
	hr{
		width: 621upx;
		margin-top: 20upx;
		margin-left: auto;
		margin-right: auto;
		height:1px;
		border:none;
		border-top:1px solid rgb(230,230,230);
	}
	.hotel-query{
		width: 700upx;
		height: auto;
		display: table;
		background: #FFFFFF;
		margin-top: -40upx;
		position: absolute;
		left: 25upx;
		right: 25upx;
		margin-bottom: 20upx;
		padding-bottom: 20upx;
		border-radius: 20upx;
		box-shadow:0 0 5px rgba(206,206,206,0.75);
		padding-top: 3upx;
	}
	.hotel-query input{
		width: 621upx;
		height: 60upx;
		margin-left: auto;
		margin-right: auto;
		font-size: 30upx;
		margin-top: 20upx;
	}
	.price-star{
		width: 621upx;
		height: 60upx;
		margin-left: auto;
		margin-right: auto;
		font-size: 30upx;
		margin-top: 20upx;
		line-height: 60upx;
		color:#CCCCCC
	}
	.pos{
		color: #000000;
	}
	.pos-icon{
		width: 20upx;
		margin-top: 20upx;
		height: 27upx;
		margin-right: 20upx;
	}
	.jiantou{
		float: right;
		transform: rotate(180deg);
		margin-top: 12upx;
	}
	.date{
		width: 621upx;
		height: 60upx;
		font-size: 30upx;
		margin-left: auto;
		margin-top: 20upx;
		line-height: 60upx;
		margin-right: auto;
	}
	.data-text{
		color: #888888;
		line-height: 60upx;
		font-size: 28upx;
		float: left;
	}
	.time{
		color: #000000;
		line-height: 60upx;
		font-size: 30upx;
	}
	.zhi{
		margin-left: 30upx;
		margin-right: 30upx;
	}
	.days{
		color: #54ABFF;
		line-height: 60upx;
		font-size: 28upx;
		float: right;
	}
	.type{
		width: 621upx;
		height: 60upx;
		margin-left: auto;
		margin-top: 20upx;
		margin-right: auto;
	}
	.type text{
		font-size: 35upx;
		float: left;
	}
	radio-group{
		float: left;
		margin-left: 20upx;
		font-size: 30upx;
	}
	
	.radio-item{
		transform: scale(0.6);
		
	}
	.btn{
		width: 600upx;
		height: 80upx;
		border: none;
		margin-top: 40upx;
		border-radius: 20upx;
		color: #FFFFFF;
		font-size: 30upx;
		line-height: 80upx;
		background: -webkit-linear-gradient(left,#54B0FF ,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right,#54B0FF ,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right,#54B0FF ,#5773FE) ;
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right,#54B0FF ,#5773FE) ;
		/* 标准的语法 */
	}
	.swiper-box{
		width: 100%;
		height: 150upx;
		border-radius: 20upx;
		background: #FFFFFF;
	}
	.swiper{
		height: 100%;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	.head-menu-area{
		width: 100%;
		height: 98upx;
		display: flex;
		flex-direction:row;
		flex-wrap: wrap;
		/* justify-content: space-between; */
	}
	.head-menu-item{
		width: 140upx;
		height: 80upx;
		/* padding: 15upx 0; */
		margin-top: 30upx;
		text-align: center;
	}
	.head-menu-img{
		width: 100%;
		height: 50upx;
	}
	.head-menu-item image{
		width: 44upx;
		height: 42upx;
	}
	.head-menu-item text{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 24upx;
	}
	.dot-main {
		width: 100%;
		height: 38upx;
		display: flex;
		margin-top: -30upx;
		/* top: 230upx; */
		/* position: absolute; */
		z-index: 20;
		justify-content: center;
		align-items: center;
	}
	.dot-item {
		width: 30upx;
		height: 8upx;
		border-radius: 30upx;
		background: rgba(0,0,0,0.2);
		margin: 0 0upx;
		box-sizing: border-box;
	}
	.active {
		background: #55A0FF;
	}
</style>
